<template>
<div style="margin-top: 20px;
            margin-left: 20px;
            margin-right: 20px;">

        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}" style="height:100px;">
                    <div class = "datapick">

                    <el-date-picker
                    v-model="time"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                    </div>

                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-1">
                        <i class="el-icon-lx-people grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">10</div>
                            <div>设备总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-2">
                        <i class="el-icon-lx-notice grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">8</div>
                            <div>正在使用</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-3">
                        <i class="el-icon-lx-goods grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">1</div>
                            <div>正在维修</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
  <el-row :gutter="20" >
    <el-col :span="12">
        <el-card shadow="hover" >
            <div id="myChart1" style="width:100%;height:400px;"></div>
        </el-card>
    </el-col>
    
    <el-col :span="12">
        <el-card shadow="hover" >
            <div id="myChart2" style="width:100%;height:400px;"></div>
        </el-card>
    </el-col>
  </el-row>  
  <el-row :gutter="20" >
    <el-col :span="12">
        <el-card shadow="hover" >
            <div id="myChart3" style="width:100%;height:400px;"></div>
        </el-card>
    </el-col>
    
    <el-col :span="12">
        <el-card shadow="hover" >
            <div id="myChart4" style="width:100%;height:400px;"></div>
        </el-card>
    </el-col>
  </el-row>  


</div>
</template>
<script>
require('echarts/theme/dark')
export default{
    
    data () {
      return {
        time:'',
        datalist:{},
        orgOptions1: {},
        orgOptions2: {},
        orgOptions3: {},
        orgOptions4: {
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        saveAsImage : {show: true}
                    }
                },
                color: '#5793f3',
                title:{
                    text:"近几日单台设备平均使用时间",
                    x:"center",
                },

                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    top: 70,
                    bottom: 50
                },
                xAxis: [

                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: '#d14a61'
                            }
                        },
                        data: [
                            (new Date((new Date()).getTime()-3600*24*1*1000)).toLocaleDateString().split('/')[2],
                            (new Date((new Date()).getTime()-3600*24*2*1000)).toLocaleDateString().split('/')[2],
                            (new Date((new Date()).getTime()-3600*24*3*1000)).toLocaleDateString().split('/')[2],
                            (new Date((new Date()).getTime()-3600*24*4*1000)).toLocaleDateString().split('/')[2],
                            (new Date((new Date()).getTime()-3600*24*5*1000)).toLocaleDateString().split('/')[2],
                            (new Date((new Date()).getTime()-3600*24*6*1000)).toLocaleDateString().split('/')[2],
                        ]
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [

                    {
                        name:'时间',
                        type:'line',
                        smooth: true,
                        data: [240,220,180,199,211,233]
                    }
                ]

        },
      }
  },
  mounted(){
      this.orgOptions = { 
          toolbox: {
              show : true,
              feature : {
                  dataView : {show: true, readOnly: false},
                  saveAsImage : {show: true}
              }
          },
        title: {
        text: '分析图',
        x: 'center',
        y: 0
      },
      grid: [
          {x: '7%', y: '7%', width: '38%'},
          {x2: '7%', y: '7%', width: '38%'},
      ],
      xAxis: [
          {gridIndex: 0,  
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
          {gridIndex: 1,  
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
      ],
      yAxis: [
          {gridIndex: 0, type:'value'},
          {gridIndex: 1, type:'value' }
      ],
      series: [
          {
              name: 'I',
              type: 'line',
              xAxisIndex: 0,
              yAxisIndex: 0,
              data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
          {
              name: 'II',
              type: 'bar',
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: [820, 932, 901, 934, 1290, 1330, 1320],
          }
      ]     
    },
    this.orgOptions2 = {
      title : {
          text: '近几日设备详情',
      },
      tooltip : {
          trigger: 'axis'
      },
      legend: {
          data:['使用率','故障率']
      },
      toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                saveAsImage : {show: true}
            }
        },
      calculable : true,
      xAxis : [
          {
              type : 'category',
              data : [(new Date((new Date()).getTime()-3600*24*1*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*2*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*3*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*4*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*5*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*6*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*7*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*8*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*9*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*10*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*11*1000)).toLocaleDateString().split('/')[2],
              (new Date((new Date()).getTime()-3600*24*12*1000)).toLocaleDateString().split('/')[2]]
          }
      ],
      yAxis : [
          {
              type : 'value'
          }
      ],
      series : [
          {
              name:'使用率',
              type:'bar',
              data:[80, 79, 84, 88, 89, 81, 87, 79, 77, 83, 92, 88],
              markPoint : {
                  data : [
                      {type : 'max', name: '最大值'},
                      {type : 'min', name: '最小值'}
                  ]
              }
          },
          {
              name:'故障率',
              type:'bar',
              data:[2.6, 5.9, 9.0, 6, 3, 1, 4, 5, 7, 2, 3, 1],
              markPoint : {
                  data : [
                      {name : '最高', value : 182.2, xAxis: 12, yAxis: 183},
                      {name : '最低', value : 2.3, xAxis: 11, yAxis: 3}
                  ]
              }
          }
      ]
    }
    this.orgOptions1 = {
      title : {
          text: '设备详情',
      },
      tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
          x : 'center',
          y : 'bottom',
          data:['使用中','故障','空闲','维修中']
      },
      toolbox: {
          show : true,
          feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {
                  show: true,
                  type: ['pie', 'funnel']
              },
              restore : {show: true},
              saveAsImage : {show: true}
          }
      },
      calculable : true,
      series : [
          {
              name:'设备详情',
              type:'pie',
              radius : [20, 150],
              roseType : 'radius',
              label: {
                  normal: {
                      show: true
                  },
                  emphasis: {
                      show: true
                  }
              },
              lableLine: {
                  normal: {
                      show: true
                  },
                  emphasis: {
                      show: true
                  }
              },
              data:[
                  {value:100, name:'使用中'},
                  {value:5, name:'故障'},
                  {value:50, name:'空闲'},
                  {value:25, name:'维修中'}
              ]
          }
      ]
    },
    this.orgOptions3={
        toolbox: {
              show : true,
              feature : {
                  dataView : {show: true, readOnly: false},
                  saveAsImage : {show: true}
              }
          },
        title:{
        text:'设备故障次数排行'  
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['设备', '设备', '设备', '设备', '设备', '设备', '设备'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                max:'100'
            }
        ],
        series : [
            {
                itemStyle:{
                    normal:{
                        color:'#d8cc85'
                        
                    }
                },
                name:'次数',
                type:'bar',
                barWidth: '60%',
                data:[70, 5, 4, 2, 2, 2, 1]
            }
        ]
    },
    this.getList();






  },



  created(){
    
    this.handleListener();
  },
  activated(){
    this.handleListener();
  },



  methods: {



    getList() {
        let myChart1 = this.$echarts.init(document.getElementById('myChart1'));
        myChart1.setOption(this.orgOptions1);
        let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
        myChart2.setOption(this.orgOptions2);
        let myChart3 = this.$echarts.init(document.getElementById('myChart3'));
        myChart3.setOption(this.orgOptions3);
        let myChart4 = this.$echarts.init(document.getElementById('myChart4'));
        myChart4.setOption(this.orgOptions4);
        

    },

    handleListener(){
        // 调用renderChart方法对图表进行重新渲染
        window.addEventListener('resize', this.renderChart)
    },
    handleBus(msg){
        setTimeout(() => {
            this.renderChart()
        }, 30);
    },
    renderChart(){
        let myChart1 = this.$echarts.init(document.getElementById('myChart1'));
        myChart1.resize();
        let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
        myChart2.resize();
        let myChart3 = this.$echarts.init(document.getElementById('myChart3'));
        myChart3.resize();
        let myChart4 = this.$echarts.init(document.getElementById('myChart4'));
        myChart4.resize();
    }
  }
}


</script>
<style scoped>

    .div-tl{
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(100, 213, 114);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 50px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .todo-item {
        font-size: 14px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }
    .datapick{
        padding: 30px 0;
        text-align: center;
        border-right: 1px solid #eff2f6;
        flex: 1;
    }

</style>
